// src/todo-list.vue

<template>
    <div>我是todo-list组件</div>
    <div>
        <div>{{ todos.length }}</div>
        <!-- 模板的其余部分 -->
        <todo-item></todo-item>
    </div>
</template>

<script lang="ts">
import {  defineComponent, provide, reactive, ref } from "vue";
import TodoItem from './todo-item.vue'

export default defineComponent({
    name: 'TodoList',
    components: {
        TodoItem
    },
    setup() {
        const user = ref('John Doe')

        const updateUserName = () => {
            user.value = 'James'
        }

        /**
         * provide两个参数：
         * name<String类型>：注入的属性名称
         * value：注入的属性值
         */
        //添加响应性：提供ref或者reactive生命的值
        provide('user', user)

        provide('updateUserName', updateUserName)
        const todos = reactive(['Feed a cat', 'Buy tickets'])


        return {
            todos,
        }
    }
})
</script>